<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./assets/css/base.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
    <link rel="stylesheet" href="./assets/css/tab.css" />
    <link rel="stylesheet" href="./assets/css/store.css">
    <link rel="stylesheet" href="./assets/css/shop-cart.css">
    <link rel="stylesheet" href="./assets/css/scroll-view.css">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

<body>
    <div class="masking" onclick="maskHidden()">
    </div>
    <div id="app">
        <div class="header-store">
            <div class="header-title-box">
                <div class="back-btn">
                    <img src="./assets/img/ico-left-btn.png" alt="返回" />
                </div>
                <div class="right">
                    <div class="header-title-text">店铺信息</div>
                </div>
                <div class="back-btn"></div>
            </div>
            <div class="store-info">
                <div class="store-title-box">
                    <div class="store-text-box">
                        <div class="title">
                            意大利特火小面条馆意大利特火小面条馆意大利特火小面条馆意大利特火小面条馆意大利特火小面条馆意大利特火小面条馆意大利特火小面条馆意大利特火小面条馆
                        </div>
                        <div class="subtitle">
                            生活总是有很多的失败，就好比游戏的....
                        </div>
                    </div>
                    <img src="./assets/img/store-img.png" alt="">
                </div>
                <div class="store-notice">
                    <img src="./assets/img/icon-horn.png" alt="" srcset="">
                    <div>公告：失败了，就失败了，爬起来总结一下再继续</div>
                </div>
            </div>
        </div>
        <div class="navigation-store">
            <div class="active">点餐</div>
            <div>评价</div>
            <div>商家</div>
        </div>
        <div class="content-store">
            <div class="category">
                <div class="category-item" onclick="selectClassesClick(1)">
                    麻辣香锅
                </div>
                <div class="category-item active" onclick="selectClassesClick(2)">
                    麻辣香锅
                </div>
                <div class="category-item" onclick="selectClassesClick(3)">
                    麻辣香锅
                </div>
            </div>
            <div class="food-list">
                <div class="category-title">麻辣香锅</div>
                <div class="scroll-view" onscroll="scrollProductList(event)">
                    <div id="scroll-1">

                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="scroll-2">
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="scroll-3">
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="food-item">
                            <img class="food-img" src="./assets/img/cabbage-fish.png" alt="">
                            <div class="food-info">
                                <div class="food-title">
                                    意大利特火小面条200g来点
                                </div>
                                <div class="food-order">
                                    <div class="food-price">¥17</div>
                                    <div class="food-option">
                                        <img class="icon-sub" src="./assets/img/icon-sub.png" alt="" srcset="">
                                        <div class="food-num">0</div>
                                        <img class="icon-add" src="./assets/img/icon-add.png" alt="" srcset=""
                                            onclick="alert(1)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
    <div class="shop-cart">

        <div class="shop-content">


            <div class="shop-capsule">
                <img class="shop-cart-img" src="./assets/img/shop-cart-gray.png" alt="" srcset="" onclick="show()">
                <div>

                </div>
            </div>
            <div class="shop-list">

            </div>

        </div>
    </div>
    <script src="./assets/js/flexible.js"></script>
    <script>
        let modal = document.getElementsByClassName('masking')[0]
        const show = () => {
            modal.classList.toggle('visible')
        }

        const maskHidden = () => {
            modal.classList.toggle('visible')
        }

        let top1 = document.getElementById("scroll-1")
        let top2 = document.getElementById("scroll-2")
        let top3 = document.getElementById("scroll-3")
        let rect1 = top1.getBoundingClientRect()
        let rect2 = top2.getBoundingClientRect()
        let rect3 = top3.getBoundingClientRect()
        let scrollView = document.getElementsByClassName("scroll-view")[0]
        //console.log(rect1.top);
        //console.log(rect1.height);
        const scrollProductList = (e) => {
            let st = scrollView.scrollTop
            let ch = scrollView.clientHeight
            //console.log(st)
            if(st<=top1.clientHeight){
                console.log(1)
            }

            if(top1.clientHeight<=st && st<=(top1.clientHeight+top2.clientHeight)){
                console.log(2)
            }
            
            if((top1.clientHeight+top2.clientHeight)<=st && st<=(top1.clientHeight+top2.clientHeight+top3.clientHeight)){
                console.log(3)
            }
            //console.log(rect1.top - rect1.top);
        //    console.log(st <= rect1.height && st > (rect1.top - rect1.top));
        //     console.log(st <= rect2.height && st > (rect2.top - rect1.top));
        //     console.log(st <= rect3.height && st > (rect3.top - rect1.top));
        //     console.log(ch);



        }

        //         scrollView.scrollTo({
        //   top: rect2.top - rect1.top+1,
        //   left: 0,
        //   behavior: 'smooth'
        // })
        const selectClassesClick = (index) => {
            let obj = document.getElementById("scroll-" + index)
            console.log( obj.getBoundingClientRect().top);
            console.log( rect1.top);
            scrollView.scrollTo({
                top:Math.ceil( obj.clientHeight),
                left: 0,
                behavior: 'smooth'
            })
        }
    </script>
</body>

</html>